<!-- 商城带背景颜色轮播 -->
<template>
	<div class="c1" @click="emit('selectImg','imgs')">
		<!-- <img :src="config.qnUrl + element.img" alt=""> -->
		<el-image :src="config.serverImg + element.img" fit="scale-down" lazy/>
	</div>
	<div class="c2">
		<div class="flex c3">
			<div class="c4">标题：</div>
			<div class="c5">
				<el-input v-model="element.name" clearable placeholder="请输入"/>
			</div>
		</div>
		<div class="flex c3">
			<div class="c4">链接：</div>
			<div class="c5">
				<el-input v-model="element.url" clearable placeholder="请输入"/>
			</div>
		</div>
		<div class="c7 flex">
			<div class="flex c3">
				<div class="c4">跳转：</div>
				<div>
					<el-select v-model="element.mode" placeholder="请选择">
						<el-option label="当前窗口打开" value="default"></el-option>
						<el-option label="新窗口打开" value="_blank"></el-option>
					</el-select>
				</div>
			</div>
			<div class="flex c3">
				<div class="c4">背景颜色：</div>
				<div>
					<el-color-picker size="small" v-model="element.value" />
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import publicJS from "@/hook/public.js";
	const {config,defaultImg} = publicJS();
	const emit = defineEmits(["selectImg"]);//自定义事件
	const props = defineProps({
		element: {
			type:Object,
			default:()=>{
				return {}
			}
		}
	})
	
	const formData = {
		show: true,
		img: defaultImg,
		name:'',
		url:'',
		mode:'',//页面或连接 打开方式
	}
	
	//暴露方法给父组件 通过ref.value调用
	defineExpose({
		formData
	})
</script>

<style  lang="scss" scoped>
		/* align-items: flex-start; */

.c1 {
	margin-right: 10px;
	width: 240px;
	height: 120px;
}

.c1 .el-image {
	width: 240px;
	cursor: pointer;
	height: 120px;
	border: 1px solid #eee;
}
.c1 .el-image:hover{border-color: var(--el-color-primary);}

.c2 {
	width: 100%;
	// max-width: 480px;
}

.c3 {
	margin: 5px 0;
}

.c4 {
	width: 80px;
	font-size:14px;
	text-align: right;
}

.c5 {
	width: 100%;
	// max-width: 380px;
}

.c6 {
	// padding-right: 20px;
}
.c7{justify-content: space-between;}
.c8 {
	margin:0 20px;
}
</style>